@extends('site.base')
@section('style')
<style>
@font-face {
    /* font-properties */
    font-family: awesome;
    src:url('font/fontawesome-webfont.woff'),  
    url('pictos/fontawesome-webfont.ttf'),
    url('pictos/fontawesome-webfont.eot'); /* IE9 */
}

#warp-page {
	position: relative;
	background-image: url({{asset('/img/header.jpg')}});
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	color: #fff;
	text-align: center;
	padding-top: 2.5em;
	cursor: default;
}
#warp-page span,
h4 {
	color: #FFF;
	font-size: 1.5em;
	margin-bottom: 3em;
}
#warp-page h2 {
	color: #FFF;
	font-size: 3em;
}
#warp-page div {
	padding-top: 65px;
}
#warp-page hr {
	top: 1.5em;
	margin-bottom: 3em;
	border-bottom-color: rgba(192,192,192,0.35);
	box-shadow: inset 0 1px 0 0 rgba(192,192,192,0.35);
}
#warp-page hr:before,
#warp-page hr:after {
	background: rgba(192,192,192,0.35);
}
#warp-page .button {
	border-radius: 100%;
	width: 5.5em;
	height: 5.5em;
	line-height: 4.5em;
	font-size: 1.5em;
	padding: 0;
	color: #fff;
	border:0px;
	background-color: #df7366;
}
#warp-page .button:hover {
	color: #fff;
	background-color: #ef8376;
}
.jumbotron{
	margin-bottom: 0;
}
#banner {
	text-align: center;
	padding:2em;	
}
#banner h2 {
	font-size: 3em;
}
#banner span {
	font-size: 1.5em;
}
#images {
	padding: 2em;
	margin-bottom: 2em;	
}
#images img {
	border-radius: 3em;
	padding: 2em;
}
#images a {
	color: #000;
}
#images a:hover {
	color: #df7366;
	text-decoration: none;
}

#image .displayboard{
	display: block;
	background-color: ghostwhite;
	
}

#article{
	border-color: #9D9D9D;
	padding-bottom: 5em;
	margin: ;	
}

.article-poster {	
	padding-top: 1em;
	border-radius: 2em;			
}

.article-title {
	font-size: 53px;
	font-family: "maiandra gd";
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	text-align: center;
}

.article-content {	
	text-align: justify;
	font-size: 18px;
	word-spacing: normal;
	font-family: "maiandra gd";
	padding-left: 1em;
}

.btn-nav{
	
}
</style>
@endsection
@section('body-content')
<div class="jumbotron" id="warp-page">
	<div class="container" align="center">
		<span>
			<h2>
				半山居
			</h2>
		</span>
		<hr />
		<h4>
			自今日始，只为不再命如纸
		</h4>
		<a class="btn button" id="btnStart" href="#banner" style="padding-top: 0.5em;">
			Start
		</a>
	</div>
</div>
<section id="banner">
	<h2>
		Hi.You're looking at <strong>Jupiter Yang</strong>'s blog
	</h2>
	<span>你当自强不息，尚可无愧于心</span>
</section>
<section id="images" class="container">
	<div class="row">
		@foreach($images as $image)
		<div class="col-md-4">
			<article>
				<div class="title">
					<img src="{{ asset($image->url)}}" class="img-responsive" style="width:368px; height: 256px;"/>
				</div>
				<div style="word-break: 2em; text-indent: 2em;">
					<a href="#">
						<h3>
							Fermentum sagittis proin
						</h3>
					</a>
					<h5>
						Commodo id natoque malesuada sollicitudin elit suscipit magna.
					</h5>
				</div>
			</article>
		</div>
		@endforeach
	</div>
</section>
{{--End of images section--}}
<section id="article" class="container">
	<div class="row">
		<article>
			<div id="poster">
				<img class="article-poster center-block img-responsive" src="{{asset('/img/pic06.jpg')}}" />
			</div>
			<div class="center-block">
				<div class="article">
					<p class="article-title">
						{{trim($article->title)}}
					</p>
					<p>
						<h5 class="article-content">
							<?php echo $article->content ?> 
						</h5>
					</p>					
				</div>				
			</div>
			<div class="col-md-4 col-md-offset-4" style="padding-top: 2em;">
					<a href="{{ URL('article/'.$article->id)}}" class="btn btn-lg btn-danger center-block">Continue Reading</a>
			</div>
		</article>
	</div>
</section>{{--End of picture section--}}
<section id="files" class="col-md-9">
</section>{{--End of file section--}}
@endsection
@section('js')
<script type="text/javascript">var height = $(window).height();
$("#warp-page").css("height", height);</script>
@endsection
